<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab标签切换样式</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./res/layui/css/layui.css" media="all">
<script src="./js/jq3/jquery.min.js" charset="utf-8"></script>
<script src="./res/layui/layui.all.js" charset="utf-8"></script>
<style>
.layui-upload-img{width:100px;margin-left:10px;}
</style>
</head>
<body>
<div>
	<h1>此页是 文件上传展示</h1>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>常规使用：普通图片上传</legend>
</fieldset>
 
<div class="layui-upload">
  <button type="button" class="layui-btn" id="test1">上传图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1">
    <p id="demoText"></p>
  </div>
</div>   
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>上传多张图片</legend>
</fieldset>
 
<div class="layui-upload">
  <button type="button" class="layui-btn" id="test2">多图片上传</button> 
  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
    预览图：
    <div class="layui-upload-list" id="demo2"></div>
 </blockquote>
</div>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>指定允许上传的文件类型</legend>
</fieldset> 

<button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件</button>
<button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon"></i>只允许压缩文件</button>
<button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上传视频</button>
<button type="button" class="layui-btn" id="test6"><i class="layui-icon"></i>上传音频</button> 
<div style="margin-top: 10px;">
 
     
<!-- 示例-970 -->
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
  
</div>
<script>
	$(function(){
	    layui.use(['layer', 'form', 'table', 'util'], function () {
	    	$ = layui.jquery,
		  	upload = layui.upload; //文件上传
				//普通图片上传
			  var uploadInst = upload.render({
			    elem: '#test1'
			    ,url: '/upload/'
			    ,before: function(obj){
			      //预读本地文件示例，不支持ie8
			      obj.preview(function(index, file, result){
			        $('#demo1').attr('src', result); //图片链接（base64）
			      });
			    }
			    ,done: function(res){
			      //如果上传失败
			      if(res.code > 0){
			        return layer.msg('上传失败');
			      }
			      //上传成功
			    }
			    ,error: function(){
			      //演示失败状态，并实现重传
			      var demoText = $('#demoText');
			      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			      demoText.find('.demo-reload').on('click', function(){
			        uploadInst.upload();
			      });
			    }
			  });
			  //多图片上传
				  upload.render({
				    elem: '#test2'
				    ,url: '/upload/'
				    ,multiple: true
				    ,before: function(obj){
				      //预读本地文件示例，不支持ie8
				      obj.preview(function(index, file, result){
				        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
				      });
				    }
				    ,done: function(res){
				      //上传完毕
				    }
				  });
			});
			//指定允许上传的文件类型
		  upload.render({
		    elem: '#test3'
		    ,url: '/upload/'
		    ,accept: 'file' //普通文件
		    ,done: function(res){
		      console.log(res)
		    }
		  });
		  upload.render({
		    elem: '#test5'
		    ,url: '/upload/'
		    ,accept: 'video' //视频
		    ,done: function(res){
		      console.log(res)
		    }
		  });
		  upload.render({
		    elem: '#test6'
		    ,url: '/upload/'
		    ,accept: 'audio' //音频
		    ,done: function(res){
		      console.log(res)
		    }
		  });
	});	
</script>
<body>
</html>
